<template>
  <div>
    <el-form label-width="80px" :model="formLabelAlign">
      <el-form-item label="姓氏">
        <el-input
          v-model="formLabelAlign.family"
          @[eventName]="doSomeThing"
        ></el-input>
      </el-form-item>
      <el-form-item label="名字">
        <el-input
          v-model="formLabelAlign.name"
          @[eventName]="doSomeThing"
        ></el-input>
      </el-form-item>
      <fieldset>
        <legend>vue3计算属性和监视</legend>
        <el-form-item label="第一个w">
          <el-input v-model="firstFull"></el-input>
        </el-form-item>
        <el-form-item label="第二个w">
          <el-input v-model="secondFull"></el-input>
        </el-form-item>
        <el-form-item label="第三个w">
          <el-input v-model="thirdFull"></el-input>
        </el-form-item>
      </fieldset>
    </el-form>
    <el-table :data="plist" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="性别">
        <template #default="scope">
          <span>{{ scope.row.gender == 0 ? "男" : "女" }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="isShow">
      <div>测试computed的缓存能力</div>
      <div>方法获取当前时间{{ getNow() }}</div>
      <div>计算属性获取时间{{ getComNow }}</div>
      <el-button type="primary" @click="getNewTime">获取新时间</el-button>
    </div>
    <ul>
       <test-item name="111" :sex="9">这里是插槽</test-item>
    </ul>
    <test-item name="111" :sex="9">这里是插槽</test-item>
    <test-item name="222" :sex="9" @reload="reload" ref="testItem">
      <template v-slot:header>
        <h2>插槽头部</h2>
      </template>
      <template #footer>
        <span>插槽底部</span>
      </template>
      <template #user="{ user }">
        <div>{{ user.name }}</div>
      </template>
    </test-item>
  
    <div id="mount-point"></div>
    <div id="mount-point1"></div>
    <el-dialog v-model="dialogTableVisible" title="search page" width="90%">
      <div v-html="searchHtml"></div>
    </el-dialog>
    <el-button type="text" @click="dialogTableVisible = true"
      >open a Table nested Dialog</el-button
    >
    <el-input v-model="keyword"></el-input>
    <el-button @click="search">搜索</el-button>
    <div id="searchBox" v-html="searchHtml">
      ddddd
    </div>
  </div>
</template>

<script lang="ts">
import {
  createApp,
  defineComponent,
  reactive,
  computed,
  ref,
  watch,
  watchEffect,
  onMounted,
  getCurrentInstance,
  toRefs,
} from "vue";
import { Vue } from "vue-class-component";
import { pType } from "@/types/plist";
import todoItem from "@/components/todoItem.vue";
import testItem from "@/components/testItem.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useStore } from "vuex";
//组件引入
export default defineComponent({
  components: {
    todoItem,
    testItem,
  },
  beforeRouteLeave(from, to, next) {
    ElMessageBox.confirm(
      "proxy will permanently delete the file. Continue?",
      "Warning",
      {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      }
    )
      .then(() => {
        next();
      })
      .catch(() => {
        this.setPathChange();
      });
  },
  created() {
    console.log(this, 11121);
  },
  setup(pro, target) {
    const dialogTableVisible = ref(false);
    const searchHtml = ref("");
    const keyword = ref("");
    const formLabelAlign = reactive({
      family: "小",
      name: "红",
    });
    //计算属性
    const firstFull = computed(() => {
      return formLabelAlign.family + formLabelAlign.name;
    });
    const secondFull = computed({
      get() {
        return formLabelAlign.family + formLabelAlign.name;
      },
      set(val: string) {
        if (val.length > 1) {
          formLabelAlign.family = val.slice(0, 1);
          formLabelAlign.name = val.slice(1, val.length - 1);
        }
      },
    });
    //监视 immediate(初始化是否执行) deep 深度监测
    const thirdFull = ref("");
    watch(formLabelAlign,({family,name},oldForm)=>{
        thirdFull.value = family + name;
        console.log(family,name,oldForm)
    },{immediate:true,deep:true})
    //监视的另一种写法 初始化默认会执行一次
    // watchEffect(() => {
    //   thirdFull.value = formLabelAlign.family + formLabelAlign.name;
    //   //  console.log(listData)
    // });

    watch([keyword,()=>formLabelAlign.name],(newVal,oldVal)=>{
      console.log(newVal)
    })
    // 生命周期
    onMounted(() => {
      const Profile = {
        template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",
        data() {
          return {
            firstName: "Walter",
            lastName: "White",
            alias: "Heisenberg",
          };
        },
      };
      createApp(Profile).mount("#mount-point");
      createApp(Profile).mount("#mount-point1");
    });

    const { proxy }: any = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
    console.log(proxy, 111);
    //reactive 是否只能是对象，数组应该怎么设置动态监测
    const listData = reactive<{ plist: pType[] }>({
      plist: [],
    });
    // 不设置接口也可以用
    // const listData = reactive({
    //     plist:[]
    // })
    const axios = proxy.$axios;
    console.log(axios);
    axios.get("/list.json").then((res: any) => {
      if (res) {
        listData.plist = res;
      }
    });
    // axios.get("/baidu").then((res: any) => {

    // });
    const eventName = ref("input");
    const doSomeThing = () => {
      listData.plist[0].name = formLabelAlign.family + formLabelAlign.name;
    };
    const getNow = () => {
      return Date.now();
    };
    const isShow = ref(true);
    const getNewTime = () => {
      isShow.value = false;
      setTimeout(() => {
        isShow.value = true;
      }, 300);
    };
    const getComNow = computed(() => {
      return Date.now();
    });
    const store = useStore();
    const setPathChange = () => {
      store.commit("setPathChange", !store.state.pathChange);
    };
    const getSearchListUrl = (keyword: string) => {
      return `baidu/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${keyword}&fenlei=256&rsv_pq=fd505bab0005c8c4&rsv_t=9e12zY%2F3DfoAe8gTiNNpGByhNbFA54UXCoPtaaFr%2B913pGgv1gE3d9eqzr4&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_sug3=2&rsv_sug1=2&rsv_sug7=101&rsv_btype=i&inputT=1011&rsv_sug4=2274`;
    };
    const reload = () => {
      console.log(444);
      console.log(this, proxy.$refs.testItem.user, proxy);
    };
    const search = () => {
      axios.get(getSearchListUrl(keyword.value)).then((res: any) => {
        if (res) {
          searchHtml.value = res;
        }
      });
    };
    return {
      formLabelAlign,
      firstFull,
      secondFull,
      thirdFull,
      ...toRefs(listData),
      eventName,
      doSomeThing,
      getNow,
      isShow,
      getNewTime,
      getComNow,
      setPathChange,
      reload,
      dialogTableVisible,
      searchHtml,
      keyword,
      search,
    };
  },
});
</script>

<style scoped lang="less">
#searchBox {
  /deep/.wrapper_new #s_tab,
  /deep/#form,
  /deep/.options_2Vntk,
  /deep/#content_right,
  /deep/#u,
  /deep/.result-molecule {
    display: none !important;
  }
  /deep/#content_left {
    padding: 0;
    margin: 0;
  }
  /deep/#container {
    width: 562px;
    overflow:hidden;
  }
}
</style>